{% load staticfiles %}
{% load myfilter %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
    <meta name="author" content="Coderthemes">

    <!-- App favicon -->
    <link rel="shortcut icon" href="{% static '' %}zircos/assets/images/favicon.ico">
    <!-- App title -->
    <title>产品列表 - WanFeng</title>

    <!-- Bootstrap select -->
    <link href="{% static '' %}zircos/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />

    <!-- Sweet Alert -->
    <link href="{% static '' %}zircos/plugins/bootstrap-sweetalert/sweet-alert.css" rel="stylesheet" type="text/css">

    <!-- App css -->
    <link href="{% static '' %}zircos/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/core.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/components.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/pages.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/menu.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/responsive.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{% static '' %}zircos/plugins/switchery/switchery.min.css">

    <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script src="{% static '' %}zircos/assets/js/modernizr.min.js"></script>

</head>


<body class="widescreen fixed-left-void">

<!-- Begin page -->
<div id="wrapper" class="enlarged forced">

<!-- Top Bar Start -->
{% include 'zircos/block/topbar.html' %}
<!-- Top Bar End -->


<!-- ========== Left Sidebar Start ========== -->
<!-- Left Sidebar End -->



<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container">


<!-- ========== Common Modal Start ========== -->
{% include 'zircos/block/modal.html' %}
<!-- Common Modal End -->


<div class="row">
    <div class="col-xs-12">
        <div class="page-title-box">
            <h4 class="page-title">{% if word %} - {{ word.keyword }} <i class="glyphicon glyphicon-download-alt"><a target="_blank" href="{% url 'downloadcsv' %}?type=p&wd={{ word.id }}">下载数据</a></i>{% endif %} </h4>
            <ol class="breadcrumb p-0 m-0">
                <li>
                    <a href="{% url 'dashboard' %}">控制台</a>
                </li>
                <li>
                    <a href="{% url 'products' %}">产品列表 </a>
                </li>
                <li class="active">
                    产品推荐
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- end row -->

<div class="row text-center">
    <div class="col-sm-12">
        <h3 class="m-t-20">产品推荐</h3>
        <div class="border center-block m-b-20"></div>
    </div>
    <div class="col-lg-12">
        <div class="card-box">
            {% for w in wordrank %}
            <a href="{% url 'products' %}?word={{ w.id }}" class="btn {% cycle 'btn-orange' 'btn-info' 'btn-warning' 'btn-danger' 'btn-inverse' 'btn-purple' 'btn-pink' %} waves-effect w-md m-b-5">{{ w.keyword }}</a>
            {% endfor %}
        </div>
    </div>
</div>
<!-- end row -->

<div class="row">
    <div class="col-sm-12">
        <form role="form" class="row" action="{% url 'search' %}" method="GET">
            {% if word %}<input type="hidden" name="word" value="{{ word.id }}" />{% endif %}
            <div class="col-sm-6 col-md-2">
                <div class="form-group">
                    <select class="selectpicker show-tick" name="filterOrg7" data-style="btn-default">
                        <option value="0" disabled selected>近7天增长率</option>
                        <option value="1">&ge; 300%</option>
                        <option value="2">&ge; 200%</option>
                        <option value="3">&ge; 100%</option>
                        <option value="4">&ge; 80%</option>
                        <option value="5">&ge; 50%</option>
                        <option value="6">&ge; 30%</option>
                        <option value="7">&ge; 20%</option>
                        <option value="8">&ge; 10%</option>
                        <option value="9">&ge; 5%</option>
                        <option value="10">&lt; 5%</option>

                    </select>
                </div>
            </div>
            <div class="col-sm-6 col-md-2">
                <div class="form-group">
                    <select class="selectpicker show-tick" name="filterWeekOrders" data-style="btn-default">
                        <option value="0" disabled selected>周销量</option>
                        <option value="1">&ge; 100</option>
                        <option value="2">&ge; 80</option>
                        <option value="3">&ge; 50</option>
                        <option value="4">&ge; 30</option>
                        <option value="5">&ge; 20</option>
                        <option value="6">&ge; 10</option>
                        <option value="7">&ge; 5</option>
                        <option value="8">&lt; 5</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-6 col-md-2">
                <div class="form-group">
                    <select class="selectpicker show-tick" name="filterOrders" data-style="btn-default">
                        <option value="0" disabled selected>总销量</option>
                        <option value="1">&ge; 3000</option>
                        <option value="2">&ge; 2000</option>
                        <option value="3">&ge; 1000</option>
                        <option value="4">&ge; 500</option>
                        <option value="5">&ge; 200</option>
                        <option value="6">&ge; 100</option>
                        <option value="7">&ge; 50</option>
                        <option value="8">&ge; 30</option>
                        <option value="9">&ge; 10</option>
                        <option value="10">&lt; 10</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-6 col-md-2">
                <div class="form-group">
                    <select class="selectpicker show-tick" name="filterVotes" data-style="btn-default">
                        <option value="0" disabled selected>评论</option>
                        <option value="1">&ge; 2000</option>
                        <option value="2">&ge; 1000</option>
                        <option value="3">&ge; 500</option>
                        <option value="4">&ge; 300</option>
                        <option value="5">&ge; 100</option>
                        <option value="6">&ge; 50</option>
                        <option value="7">&ge; 20</option>
                        <option value="8">&ge; 10</option>
                        <option value="9">&lt; 10</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-6 col-md-2">
                <div class="form-group">
                    <select class="selectpicker show-tick" name="filterPrice" data-style="btn-default">
                        <option value="0" disabled selected>价格</option>
                        <option value="1">&gt; 100.0</option>
                        <option value="2">50.0～100.0</option>
                        <option value="3">30.0～50.0</option>
                        <option value="4">20.0～30.0</option>
                        <option value="5">10.0～20.0</option>
                        <option value="6">5.0～10.0</option>
                        <option value="7">1.0～5.0</option>
                        <option value="8">&lt; 1.0</option>
                    </select>
                </div>
            </div>

            <div class="col-sm-6 col-md-2 text-center ">
                <button type="submit" class="btn btn-purple waves-effect waves-light"><i class="mdi mdi-magnify m-r-5"></i>搜  索</button>
            </div>
            <div class="col-xs-12 m-b-10 m-t-10"></div>
        </form>
    </div>
</div>
<!-- end row -->


<div class="row">
{% for product in productList %}
<div class="col-md-3 col-sm-6">
    <div class="property-card">
        <a href="{% url 'product_info' product.product_id %}" target="_blank"><div class="property-image" style="background: url('{{ product.thumb }}') center center / cover no-repeat;">
            <span class="property-label label label-warning" id="price-{{ product.product_id }}">{% ifnotequal product.low_price product.high_price %}$ {{ product.low_price|calPrice:product.discount }} - $ {{ product.high_price|calPrice:product.discount }}{% else %}$ {{ product.high_price|calPrice:product.discount }}{% endifnotequal %}</span>
        </div></a>
        <!--<a href="javascript:;" class="link-compare"><label class="compare m-l-10"><input type="checkbox" value="{{ product.product_id }}"><input type="hidden" name="compare-img" value="{{ product.thumb }}">对比</label></a>-->

        <div class="property-content">
            <div class="listingInfo">
                <div class="">
                    <h5 class="text-success m-t-0" id="rating-{{ product.product_id }}">{{ product.average_star_rating }}</h5>
                </div>
                <div class="">
                    <h3 class="text-overflow"><a href="{% url 'product_info' product.product_id %}" target="_blank" class="text-dark">{{ product.product_title }}</a></h3>
                    <p class="text-muted text-overflow"><i class="mdi mdi-map-marker-radius m-r-5"></i><span id="tsc-{{ product.product_id }}">{{ product.top_sale_country|TranslateCountry }}</span></p>

                    <div class="row text-center">
                        <div class="col-xs-3">
                            <h4 id="weekly-order-{{ product.product_id }}">{{ product.weekly_orders }}</h4>
                            <p class="text-overflow" title="Square Feet">周销量</p>
                        </div>
                        <div class="col-xs-3">
                            <h4 id="order-{{ product.product_id }}">{{ product.orders }}</h4>
                            <p class="text-overflow" title="Bedrooms">总销量</p>
                        </div>
                        <div class="col-xs-3">
                            <h4 id="vote-{{ product.product_id }}">{{ product.votes }}</h4>
                            <p class="text-overflow" title="Parking Space">评论数</p>
                        </div>
                        <div class="col-xs-3">
                            <h4 id="wish-{{ product.product_id }}">{{ product.wish_list }}</h4>
                            <p class="text-overflow" title="Parking Space">心愿单</p>
                        </div>
                    </div>

                    <div class="row text-center">
                        <div class="col-xs-3">
                            <h4><button class="btn btn-icon btn-sm btn-inverse m-b-4" onclick="collectOneKey('{{ product.product_id }}')"><i class="glyphicon glyphicon-play"></i></button></h4>
                        </div>
                        <div class="col-xs-3">
                            <h4>{% if user in product.user.all %}<button class="btn btn-icon btn-sm btn-primary m-b-4"  onclick="cancelFav({{ product.product_id }})" id="fav-{{ product.product_id }}" ><i class="glyphicon glyphicon-heart" title="取消收藏"></i></button>{% else %}<button class="btn btn-icon btn-sm btn-primary m-b-4"  onclick="addfav({{ product.product_id }})" id="fav-{{ product.product_id }}" ><i class="glyphicon glyphicon-heart-empty" title="收藏商品"></i></button>{% endif %}</h4>
                        </div>
                        <div class="col-xs-3">
                            <h4>{% if user in product.monitor_user.all %}<button class="btn btn-icon btn-sm btn-brown m-b-4" id="mo-{{ product.product_id }}" onclick="cancelmonitor('{{ product.product_id }}')"><i class="glyphicon glyphicon-eye-open"></i></button>{% else %}<button class="btn btn-icon btn-sm btn-brown m-b-4" id="mo-{{ product.product_id }}" onclick="addmonitor('{{ product.product_id }}')"><i class="glyphicon glyphicon-eye-close"></i></button>{% endif %}</h4>
                        </div>
                        <div class="col-xs-3">
                            <h4><button class="btn btn-icon btn-sm btn-purple m-b-4"><i class="glyphicon glyphicon-folder-open"></i></button></h4>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-4"><p class="text-overflow">OGR / 3</p></div>
                        <div class="col-xs-8">
                            <div class="progress progress-md">
	                                            <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="{% if product.three_growth_rates %}{% widthratio product.three_growth_rates 1 100 %}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" style="width: {% if product.three_growth_rates %}{% if product.three_growth_rates > 1  %}100{% else %}{% widthratio product.three_growth_rates 1 100 %}{% endif %}{% else %}0{% endif %}%;" id="ogr3-{{ product.product_id }}">
                                                    {% if product.three_growth_rates %}{% widthratio product.three_growth_rates 1 100 %}{% else %}0{% endif %}%
	                                            </div>
	                                        </div>
                        </div>
                        <div class="col-xs-4"><p class="text-overflow">OGR / 7</p></div>
                        <div class="col-xs-8">
                            <div class="progress progress-md">
	                                            <div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="{% if product.seven_growth_rates %}{% widthratio product.seven_growth_rates 1 100 %}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" style="width: {% if product.seven_growth_rates %}{% if product.seven_growth_rates > 1 %}100{% else %}{% widthratio product.seven_growth_rates 1 100 %}{% endif %}{% else %}0{% endif %}%;" id="ogr7-{{ product.product_id }}">
	                                                {% if product.seven_growth_rates %}{% widthratio product.seven_growth_rates 1 100 %}{% else %}0{% endif %}%
	                                            </div>
	                                        </div>
                        </div>
                        <div class="col-xs-4"><p class="text-overflow">OGR / 15</p></div>
                        <div class="col-xs-8">
                            <div class="progress progress-md">
	                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{% if product.fifteen_growth_rates %}{% widthratio product.fifteen_growth_rates 1 100 %}{% else %}0{% endif %}" aria-valuemin="0" aria-valuemax="100" style="width: {% if product.fifteen_growth_rates %}{% if product.fifteen_growth_rates > 1 %}100{% else %}{% widthratio product.fifteen_growth_rates 1 100 %}{% endif %}{% else %}0{% endif %}%;" id="ogr15-{{ product.product_id }}">
                                                    {% if product.fifteen_growth_rates %}{% widthratio product.fifteen_growth_rates 1 100 %}{% else %}0{% endif %}%
	                                            </div>
	                                        </div>
                        </div>
                    </div>

                    <div class="m-t-2">
                        <button type="button" class="btn btn-success btn-block waves-effect waves-light">查看详情</button>
                    </div>

                </div>
            </div>
            <!-- end. Card actions -->
        </div>
        <!-- /inner row -->
    </div>
    <!-- End property item -->
</div>
<!-- end col -->
{% endfor %}

</div>
<!-- end row -->


<div class="text-right">
    <ul class="pagination pagination-split">
        {% if productList.has_previous %}

            <li>
              <a href="{% if wd %}?word={{ wd }}&{% else %}?{% endif %}page={{ productList.previous_page_number }}{% if o %}&o={{ o }}{% endif %}{% if store %}&store={{ store }}{% endif %}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>

                  {% else %}
                  <li class="disabled">
              <a href="#" aria-label="Previous">
                <span aria-hidden="false">&laquo;</span>
              </a>
            </li>
              {% endif %}
          {% for p in productList.paginator.page_range %}
          {% ifequal p productList.number %}
            <li class="active"><a href="#">{{ p }}</a></li>
              {% else %}
              <li><a href="{% if wd %}?word={{ wd }}&{% else %}?{% endif %}page={{ p }}{% if o %}&o={{ o }}{% endif %}{% if store %}&store={{ store }}{% endif %}">{{ p }}</a></li>
          {% endifequal %}
        {% endfor %}
          {% if productList.has_next %}
            <li>
              <a href="{% if wd %}?word={{ wd }}&{% else %}?{% endif %}page={{ productList.next_page_number }}{% if o %}&o={{ o }}{% endif %}{% if store %}&store={{ store }}{% endif %}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          {% else %}
              <li class="disabled">
              <a href="#" aria-label="Next">
                <span aria-hidden="false">&raquo;</span>
              </a>
            </li>
          {% endif %}
    </ul>
</div>



</div> <!-- container -->

</div> <!-- content -->


<!-- Footer Copyright Start -->
{% include 'zircos/block/footer_copyright.html' %}
<!-- /Footer Copyright End -->

</div>


<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->


<!-- Right Sidebar -->
{% include 'zircos/block/right-bar.html' %}

<!-- /Right-bar -->

</div>
<!-- END wrapper -->



<script>
    var resizefunc = [];
</script>

<!-- jQuery  -->
<script src="{% static '' %}zircos/assets/js/jquery.min.js"></script>
<script src="{% static '' %}zircos/assets/js/bootstrap.min.js"></script>
<script src="{% static '' %}zircos/assets/js/detect.js"></script>
<script src="{% static '' %}zircos/assets/js/fastclick.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.blockUI.js"></script>
<script src="{% static '' %}zircos/assets/js/waves.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.slimscroll.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.scrollTo.min.js"></script>
<script src="{% static '' %}zircos/plugins/switchery/switchery.min.js"></script>

<!-- Bootstrap select js -->
<script src="{% static '' %}zircos/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>

<!-- Sweet-Alert  -->
<script src="{% static '' %}zircos/plugins/bootstrap-sweetalert/sweet-alert.min.js"></script>
<script src="{% static '' %}zircos/assets/pages/jquery.sweet-alert.init.js"></script>

<!-- App js -->
<script src="{% static '' %}zircos/assets/js/jquery.core.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.app.js"></script>

<script type="text/javascript">
    //一键采集产品信息与交易记录
    function collectOneKey(productId){
          swal({
            title: "采集任务即将执行!",
            text: "3秒后开始采集.",
            timer: 3000,
            showConfirmButton: false
        });
          $.post("{% url 'aliexpress:collectOneKey' %}",{productId:productId},function(result){
              //console.log(result);
              if(result.error==1){
                  //alert(result.msg);
                  swal(result.msg,"采集失败", "warning");
                  return false;
              }else{
                  if(result.lowPrice == result.highPrice){
                      $("#price-"+productId).html('$'+(result.lowPrice).toFixed(2));
                  }else{
                      $("#price-"+productId).html('$'+(result.lowPrice).toFixed(2)+' - $'+(result.highPrice).toFixed(2));
                  }

                  $("#wish-"+productId).html(result.wishList);
                  $("#order-"+productId).html(result.orders);
                  $("#vote-"+productId).html(result.votes);
                  $("#rating-"+productId).html(result.averageStarRating);
                  $("#weekly-order-"+productId).html(result.weekly_orders);
                  $("#tsc-"+productId).html(result.top_sale_country);
                  var r3 = (parseFloat(result.three_growth_rates)*100).toFixed(1);
                  $("#ogr3-"+productId).html(r3+'%');
                  if(r3>100){
                      $("#ogr3-"+productId).attr("style",'width:100%');
                  }else{
                      $("#ogr3-"+productId).attr("style",'width:'+r3+'%');
                  }
                  var r7 = (parseFloat(result.seven_growth_rates)*100).toFixed(1);
                  $("#ogr7-"+productId).html(r7+'%');
                  if(r7>100){
                      $("#ogr7-"+productId).attr("style",'width:100%');
                  }else{
                      $("#ogr7-"+productId).attr("style",'width:'+r7+'%');
                  }
                  var r15 = (parseFloat(result.fifteen_growth_rates)*100).toFixed(1);
                  $("#ogr15-"+productId).html(r15+'%');
                  if(r15 > 100){
                      $("#ogr15-"+productId).attr("style",'width:100%');
                  }else{
                      $("#ogr15-"+productId).attr("style",'width:'+r15+'%');
                  }
                  swal({title:"采集完毕",text:"商品数据已经采集完成!",timer: 3000,showConfirmButton: false});
              }
          });
      }

    //收藏产品
    function addfav(id){
          //location.href = "{% url 'favorite_add' %}?id="+id;
            $.get("{% url 'favorite_add' %}?id="+id, function(result){
                if(result=='1'){
                    var fav = $('#fav-'+id);
                    fav.html('<i class="glyphicon glyphicon-heart" title="取消收藏"></i>');
                    fav.attr('onclick','cancelFav(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "成功收藏商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("收藏失败", "error");
                }
              });
      }

    function cancelFav(id){
          swal({
            title: "你确定取消收藏此商品吗?",
            text: "此商品将从收藏列表移除!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是, 取消收藏 !",
            cancelButtonText: "否, 继续收藏 !",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm){
            if (isConfirm) {
                $.get("{% url 'favorite_remove' %}?id="+id, function(result){
                if(result=='1'){
                    var fav = $('#fav-'+id);
                    fav.html('<i class="glyphicon glyphicon-heart-empty" title="收藏商品"></i>');
                    fav.attr('onclick','addfav(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "成功移除商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: false
                    });
                }else{
                    swal("取消收藏失败", "error");
                }
              });
            }else {
                swal("已取消", "放弃操作", "error");
            }
        });
      }

    function addmonitor(id){
          //location.href = "{% url 'favorite_add' %}?wordId="+id
          $.get("{% url 'aliexpress:monitor_add' %}?id="+id, function(result){
                if(result=='1'){
                    $('#mo-'+id).html('<i class="glyphicon glyphicon-eye-open"></i>');
                    //$('#fav-'+id).removeAttr('onclick');
                    $('#mo-'+id).attr('onclick','cancelmonitor(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "商品［"+id+"］成功加入监控列表!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("收藏失败", "error");
                }
            });
      }

    function cancelmonitor(id){
          swal({
            title: "你确定取消监控此商品吗?",
            text: "此商品将从列表移除!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是, 取消监控 !",
            cancelButtonText: "否, 继续监控 !",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm){
            if (isConfirm) {
                $.get("{% url 'aliexpress:monitor_remove' %}?id="+id, function(result){
                if(result=='1'){
                    //$('.p-'+id).remove();
                    $('#mo-'+id).html('<i class="glyphicon glyphicon-eye-close"></i>');
                    //$('#fav-'+id).removeAttr('onclick');
                    $('#mo-'+id).attr('onclick','addmonitor(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "取消监控商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("操作失败", "error");
                }
            });
            }else {
                swal("已取消", "放弃操作", "error");
            }
        });

      }
</script>

{% include 'zircos/block/footer_comm.html' %}

</body>
</html>